<template>
	<div class="paddB60">

            <div class="operatBtnWrapper">
                <!-- <button class="operatBtn marR5" @click.stop="routerToAddPos">新增职位</button> -->
                <button class="operatBtn marR5" @click.stop="dialogVisible =true">新增职位</button>
            </div>
            <div class="tableWrapper1 paddLR20 minWid1366">
                <el-row class="rowClass borderT1">
                    <!-- <el-col :span="2">
                    <p class="paddTB10 theader borderL1">
                        序号
                    </p>
                    </el-col> -->
                    <el-col :span="7">
                        <p class="paddTB10 borderL1 theader">
                            职位名称
                            <span class="tableCaretWrapper" v-if="tableShowPos.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('pos_name')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('pos_name')"></i>
                                <!-- <i class="tableSortCaret tableAscending" @click.stop="sortAsc" :class="{ tableAscendingActive: currSort.sortType === 1 }"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc" :class="{ tableDescendingActive: currSort.sortType === 2 }"></i> -->
                            </span>
                        </p>
                    </el-col>
                    <el-col :span="7">
                        <p class="paddTB10 borderL1 theader">
                            人员数量
                            <span class="tableCaretWrapper" v-if="tableShowPos.length > 0">
                                <i class="tableSortCaret tableAscending" @click.stop="sortAsc('userLen')"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc('userLen')"></i>
                                <!-- <i class="tableSortCaret tableAscending" @click.stop="sortAsc" :class="{ tableAscendingActive: currSort.sortType === 1 }"></i>
                                <i class="tableSortCaret tableDescending" @click.stop="sortDesc" :class="{ tableDescendingActive: currSort.sortType === 2 }"></i> -->
                            </span>
                        </p>
                    </el-col>
                    <el-col :span="10">
                    <p class="paddTB10 borderL1 theader borderR1">操作</p>
                    </el-col>
                </el-row>
                <template v-if="tableShowPos.length > 0">
                    <div v-for="(item,index) of tableShowPos" :key="item.id" :index="index"> 
                        <el-row class="rowClass">
                            <!-- <el-col :span="2">
                                <p class="paddTB10 tContent borderL1">{{index + (serverPage.currPage - 1) * serverPage.pageSize + 1}}</p>
                            </el-col> -->
                            <el-col :span="7">
                                <p class="paddTB10 borderL1 tContent">{{item.pos_name}}</p>
                            </el-col>
                            <el-col :span="7">
                                <p class="paddTB10 borderL1 tContent">{{item.userLen}}</p>
                            </el-col>
                            <el-col :span="10">
                                <div class="paddTB10 borderL1 tContent borderR1" v-if = "item.userLen === 0 && item.alwaysDepartUsedCount === 0">
                                    <span title="修改" class="marR15"><icon name="change" class="scaleIcon1" title="修改" @click.native.stop="editPos(item.id,item.pos_name)"></icon></span>
                                    <span title="删除部门"><icon name="del" class="scaleIcon1" title="删除职位" @click.native.stop="deletePos(item.id,index)"></icon></span>
                                    <!-- <icon name="del" class="scaleIcon1 marR15" @click.native.stop="deletePos(item.id)" v-if="!item.userLen"></icon>
                                    <icon name="delDisabled" class="scaleIcon1 marR15" v-else></icon> -->
                                        <!-- <icon name="hide" class="scaleIcon1" title="隐藏职位" @click.native.stop="hidePost(item,index)" v-if="item.is_show === 1"></icon>
                                        <icon name="hideDisabled" class="scaleIcon1" title="显示职位" @click.native.stop="showPost(item,index)" v-else-if="item.is_show === 2"></icon> -->
                                </div>
                                <div class="paddTB10 borderL1 tContent borderR1" v-else>
                                    /
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                
                <div v-if="tableShowPos.length <= 0" class="tipNoData">暂无数据</div>
        </div>
        
        <div class="rightPageWripper" v-if="tableShowPos.length > 0">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="serverPage.currPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="serverPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="serverPage.totalSize">
            </el-pagination>
        </div>

        <!-- 新增/修改职位表单 -->
        <el-dialog
            v-dialogDrag
            class="posClass"
            :title="title"
            width="30%"
            :visible.sync="dialogVisible"
            :before-close="cancel"
            center>
            <el-form ref="form" :model="form" :rules="rules" class="paddLR20 marT10" :inline="true">
                <el-row>
                    <el-col :span="24">
                    <el-form-item label="职位名称" prop="posName">
                        <el-input v-model.trim="form.posName" class="inputTxtWrapper" maxlength="9"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
		</el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add('form')">确 定</el-button>
            </span>
        </el-dialog>

	</div>
</template>

<script>
  import http from '../../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { getPageData} from "@/assets/js/common.js"



  export default {
    data() {
      return {
        dialogVisible : false,
        title : '新增职位',
        form: {
            id : null,//    所属职位id
            posName: '',
        },
        rules: {
          posName: [
            { required: true, message: '请输入职位名称', trigger: 'blur' },
          ]
        },


        tableShowPos: [],              //  显示的职位

        serverPage:{                                                                                              //  后台分页                                    
            pageSize:10,                 //  每页显示10个
            totalSize:0,                 //  总记录数
            currPage:1,                    //  当前页码 
            currShowSize:0,     //  当前显示的条数   
        },  
        sortType:1,                         //  1升序，2降序    
        sortIdent:'pos_name',                         //  排序字段与数据库保持一致，默认为根据职位排序
      }
    },
    methods: {
        /*取消新增或修改职位弹框  */
        cancel(){
            this.title = '新增职位'
            this.form.posName = ''
            this.form.id = null
            this.$refs.form.resetFields()
            this.dialogVisible = false
        },
        /* 确认新建 / 编辑职位 */
      add(form) {
        const that = this

        let url = 'admin/post/save'//..新建接口
        if(that.form.id !== null){//    如果为编辑职位
            url = 'admin/post/update'
        }


        this.$refs[form].validate((valid) => {                                              //  表单校验成功
          if (valid) {
              that.$confirm('是否确认?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                    _g.showLoading('提交中')
                    that.apiPost(url, {...that.form}).then((res) => {
                        // console.log('res = ',res)
                         _g.showLoading().close()
                         if(typeof res === 'string'){
                            res = JSON.parse(res)
                          }
                        if (res.code != 200) {
                          that.handleError(res)
                        } else {
                          if(res.data.isSuccess === 0){             //  成功
                              _g.toastMsg("success", res.message)
                              that.cancel()
                              that.sortByCurrSort()//   重新请求数据
                          }else{
                              _g.toastMsg("error", res.message)
                          }
                        }
                    })
              }).catch(() => {});
          }
        })
      },
    /* 删除职位 */
    deletePos(id){
        const that = this
        that.$confirm('是否确认删除职位?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                    _g.showLoading('删除中')
                    that.apiPost('/admin/post/delete', {id}).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                            res = JSON.parse(res)
                        }
                        if (res.code != 200) {
                            that.handleError(res)
                        } else {
                            if(res.data.isSuccess === 0){
                                _g.toastMsg("success", res.message)
                                that.getPosList()
                            }else if(res.data.isSuccess === 1 || res.data.isSuccess === 2){
                                _g.toastMsg("error", res.message)
                            }
                        }
                })
              }).catch(() => {})
    },

    /* 隐藏职位 */
    // hidePost(post,index){
    //     const that = this
    //     let tableShowPos =  that.tableShowPos   //  该页所有职位
    //     that.$confirm('是否确认隐藏该职位?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                 _g.showLoading('隐藏中')
    //                 that.apiPost('/admin/post/hide', {id:post.id}).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                         if(res.data.isSuccess === 0){
    //                             _g.toastMsg("success", res.message)
    //                             tableShowPos[index].is_show = 2                     // 职位状态为隐藏

    //                             that.tableShowPos = tableShowPos
    //                         }else if(res.data.isSuccess === 1 || res.data.isSuccess === 2){
    //                             _g.toastMsg("error", res.message)
    //                         }
    //                     }
    //             })
    //           }).catch(() => {})
    // },

    /* 显示职位 */
    // showPost(post,index){
    //     const that = this
    //     let tableShowPos =  that.tableShowPos   //  所有部门
    //     that.$confirm('是否确认显示该职位?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //           }).then(() => {
    //                 _g.showLoading('显示中')
    //                 that.apiPost('/admin/post/show', {id:post.id}).then((res) => {
    //                     _g.showLoading().close()
    //                     if(typeof res === 'string'){
    //                         res = JSON.parse(res)
    //                     }
    //                     if (res.code != 200) {
    //                         that.handleError(res)
    //                     } else {
    //                         if(res.data.isSuccess === 0){
    //                             _g.toastMsg("success", res.message)
    //                             tableShowPos[index].is_show = 1                    // 部门状态为显示

    //                             that.tableShowPos = tableShowPos
    //                         }else if(res.data.isSuccess === 1 || res.data.isSuccess === 2){
    //                             _g.toastMsg("error", res.message)
    //                         }
    //                     }
    //             })
    //           }).catch(() => {})
    // },

      /* 跳转到编辑职位页面 */
    // editPos(id,posName){
    //     this.$router.push({ path: '/admin/position/edit', query: { id, posName}})
    // },

      /* 跳转到编辑职位页面 */
    editPos(id,posName){
        this.form.id = id
        this.form.posName = posName
        this.title = '修改职位'
        this.dialogVisible = true// 显示弹框
    },

    /* 列升排序 */
        sortAsc(sortIdent){
            const that = this
            let posList = []

            let data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType:1,
            }
            // 记录排序类型
            that.sortType = 1      
            // 记录排序字段
            that.sortIdent = sortIdent   

            _g.showLoading('排序中')
                that.apiPost('admin/post/index', data).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            posList = res.data.posList.data
                            if(posList.length > 0){
                                _g.toastMsg("success", res.message)
                                
                                if(posList.length > 0){
                                    that.tableShowPos = posList
                                    that.serverPage.totalSize = res.data.total
                                    that.serverPage.currShowSize = res.data.per_page
                                }
                           }else{
                                _g.toastMsg("warning", '暂无数据')
                           }

                        }
                    }
            })
        },

      /* 根据职位名字降排序 */
      /* 列降排序 */
        sortDesc(sortIdent){
            const that = this
            
            let posList = []

            let data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType:2,
            }

             // 记录排序类型
            that.sortType = 2  
             // 记录排序字段
            that.sortIdent = sortIdent

            _g.showLoading('排序中')
                that.apiPost('admin/post/index', data).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            console.log('res = ',res)
                                posList = res.data.posList.data
                                if(posList.length > 0){
                                    _g.toastMsg("success", res.message)
                                    if(posList.length > 0){
                                        that.tableShowPos = posList
                                        that.serverPage.totalSize = res.data.total
                                        that.serverPage.currShowSize = res.data.per_page
                                    }
                                }else{
                                        _g.toastMsg("warning", '暂无数据')
                                }

                            }

                    }
            })
        },

      /* 跳转到新增职位页面 */
      routerToAddPos(){
        this.$router.push('/admin/position/add')
      },

    /* 根据当前排序类型进行排序 */
      sortByCurrSort(){
          if(this.sortType === 1){
              this.sortAsc(this.sortIdent)
          }else if(this.sortType === 2){
              this.sortDesc(this.sortIdent)
          }
        //   if(this.currSort.sortType === 1){
        //       this.sortAsc()
        //   }else if(this.currSort.sortType === 2){
        //       this.sortDesc()
        //   }
      }, 

     handleSizeChange(){
        this.sortByCurrSort()
      },
      handleCurrentChange(){
         this.sortByCurrSort()
      },

      /* 获取职位列表 */
      getPosList(){
            const that = this
            let tableShowPos = []           //  显示的职位            

            const data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent:that.sortIdent,
                sortType:1,
            }

            _g.showLoading('加载中');
            this.apiPost("admin/post/index",data).then(res => {
                    _g.showLoading().close()
                    console.log('res = ',res)
                    if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                      this.handleError(res)
                    } else {
                        if(res.data.posList.data.length > 0){
                            that.tableShowPos = res.data.posList.data
                        }

                        that.serverPage.totalSize = res.data.total
                        that.serverPage.currShowSize = res.data.per_page
                    }
              })
      },
    },
    created() {
      this.getPosList()
    },
    computed: {
    },
    components: {
    },
    mixins: [http]
  }
</script>